<template>
  <div class="user-center">
    <div class="header">
      <div class="avatar-info">
        <img class="avatar" :src="user.userInfo?.avatar ? handleImgSrc(user.userInfo?.avatar) : defaultAvatar"
          alt="用户头像" @click="user.isLogin() ? router.push('/user/userInfo') : ''" />
        <div class="user-name c-333 f600">{{ user.userInfo?.id ? user.userInfo?.nickname : '匿名用户' }}</div>
      </div>
      <div class="content-info flexBox c-333">
        <div class="textCenter item" @click="router.push('/user/favorite')">
          <span class="block fs28 f600">{{ user.userInfo?.id ? statInfo.data.collect : 0 }}</span>
          <span class="block fs26">我的收藏</span>
        </div>
        <div class="textCenter item" @click="router.push('/user/walletLog')">
          <span class="block fs28 f600">{{ user.userInfo?.id ? statInfo.data.balance : 0 }}</span>
          <span class="block fs26">账户余额</span>
        </div>
        <div class="textCenter item"
          @click="router.push({ path: '/user/comment', query: { userId: user.userInfo?.id } })">
          <span class="block fs28 f600">{{ user.userInfo?.id ? statInfo.data.comment : 0 }}</span>
          <span class="block fs26">我的评价</span>
        </div>
      </div>
    </div>
    <div class="mt35">
      <van-cell-group inset>
        <van-cell title="餐厅信息" is-link @click="router.push('/user/restaurantInfo')" />
        <van-cell title="留言板" is-link @click="router.push('/user/comment')" />
        <van-cell title="优惠券" is-link />
        <van-cell title="退出登录" is-link @click="logout" v-if="user.isLogin()" />
        <van-cell title="立即登录" is-link to="/login" v-if="!user.isLogin()" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userStore } from '@/store'
import defaultAvatar from '@/assets/images/avatar.jpg'
import { handleImgSrc } from '@/utils'
import router from '@/router'
import { showConfirmDialog } from 'vant'
import { logoutApi, userStat } from '@/api/user'
import { onMounted, reactive } from 'vue'
import { UserStat } from '@/types/userTypes'

const user = userStore()
const statInfo = reactive({
  data: {} as UserStat
})

const getStat = async () => {
  const { data } = await userStat()
  if (data.code === 0) {
    statInfo.data = data.data
  }
}

const logout = async () => {
  showConfirmDialog({
    title: '退出登录',
    message: '确定退出登录吗？',
    confirmButtonColor: '#40a9ff'
  }).then(async () => {
    const { data } = await logoutApi()
    if (data.code === 0) {
      user.clearUserInfo()
      localStorage.removeItem('redirectAfterLogin')
    }
  }).catch(() => {
    return
  })
}

onMounted(() => {
  if (user.isLogin()) getStat()
})
</script>

<style lang="scss" scoped>
.user-center {
  width: 100%;
  min-height: 100%;
  background-color: #F7F7F7;
  font-size: 14px;
  color: #333;

  .header {
    width: 100%;
    background: linear-gradient(to bottom, #A55921, #EFE9E9);
    color: #fff;
    height: 550px;
    padding: 0 25px;
    position: relative;
    box-sizing: border-box;

    .avatar-info {
      text-align: center;
      position: absolute;
      top: 180px;
      left: 50%;
      transform: translateX(-50%);

      .avatar {
        max-width: 120px;
        max-height: 150px;
        border-radius: 50%;
      }

      .user-name {
        margin-top: 10px;
        font-size: 36px;
        font-weight: bold;
      }
    }

    .content-info {
      width: 100%;
      background: #FBFAF8;
      height: 130px;
      border-radius: 35px 35px 0 0;

      position: absolute;
      top: 420px;
      left: 50%;
      transform: translateX(-50%);
      padding: 20px;

      .item {
        width: 33.3%;
        position: relative;

        ::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 1px;
          height: 65px;
          background-color: #E5E5E5;
        }

        &:last-child {
          ::after {
            display: none;
          }
        }
      }
    }
  }
}
</style>